<template>
    <div class="jt-vue-search-box-container" >
        <div class="search-box-wrapper">
            <input type="text"
                v-model="keyword"
                @keyup.enter="search"
                @input="autoComplete"
                @focus="focus"
                >
            <span class="search-btn" @click="search" >搜索</span>
        </div>
        <div class="search-tips">
            <ul 
                v-show="show"
            >
                <li 
                
                v-for="(tip, index) in tips"
                :key="index"
                @click="changeTip(tip)"
                @mouseover="selectedTip=index"
                :class="{'autocomplete-selected': index === selectedTip}">
                    {{tip.name}}
                    <span class="search-tips-district">{{tip.district}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props: ['searchOption', 'onSearchResult', 'events', 'default', 'onSelect'],
    data() {
        return {
            timer: null,
            keyword: this.default || '',
            tips: [],
            selectedTip: -1,
            loaded: false,
            adcode: null,
            show:false,
        }
    },
    computed: {
        _Autocomplete() {
            return new AMap.Autocomplete({})
        }
    },
    methods: {
        autoComplete() {
            if (!this.keyword) return;
            if(this.timer) {
                window.clearTimeout(this.timer)
                this.timer = null
            }
            this.timer = setTimeout(this.queryTips, 500)
        },
        queryTips() {
            this._Autocomplete.search(this.keyword, (status, result) => {
                if (status === 'complete') {
                    this.show = true
                    this.tips = result.tips;
                }
            })
        },
        search() {
            this.tips = []
            this.queryTips()
        },
        changeTip(tip) {
            this.adcode = tip.adcode;
            this.keyword = tip.name;
        
            this.onSelect && this.onSelect(tip)
            this.show = false
        },
        focus() {
            this.show = true
            console.log('focus')
        }
    }
}
</script>
<style lang="scss">
.jt-vue-search-box-container {
    position: relative;
    width: 360px;
    height: 45px;
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.15);
    border-radius: 2px 3px 3px 2px;
    z-index: 10;
    .search-box-wrapper {
      position: absolute;
      display: flex;
      align-items: center;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      input {
        flex: 1;
        height: 20px;
        line-height: 20px;
        letter-spacing: .5px;
        font-size: 14px;
        text-indent: 10px;
        box-sizing: border-box;
        border: none;
        outline: none;
      }

      .search-btn {
        width: 45px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        cursor: pointer;
      }
    }

    .search-tips {
      position: absolute;
      top: 100%;
      border: 1px solid #dbdbdb;
      background: #FFF;
      overflow: auto;
      width: 100%;
      ul {
        padding: 0;
        margin: 0;

        li {
          height: 40px;
          line-height: 40px;
          box-shadow: 0 1px 1px rgba(0,0,0,.1);
          padding: 0 10px;
          cursor: pointer;

          &.autocomplete-selected {
            background: #eee;
          }
        }
      }

      .search-tips-district {
          font-size: 12px;
          color: #888;
      }
    }
  }
</style>